<template>
  <el-container>
    <el-header>
      <Header style="background-color: #fff;z-index: 10"/>
    </el-header>

    <el-container >

      <!--    主页开始-->
      <el-main class="container main-container">
        <div class="view user-view" >
          <div class="major-area">
            <div itemscope="itemscope" itemtype="http://schema.org/Person" class="user-info-block block shadow">
              <img
                  loading="eager"
                  src="https://img0.baidu.com/it/u=1752903520,1572100722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1687798800&t=34611a8907e664dac0efd0982457d7ec" alt=""
                  class="lazy avatar"/>
              <div class="info-box info-box">
                <div class="top">
                  <div class="left">
                    <h1 class="username">
                      <span class="user-name">艾卡西亚的暴雨</span>
                    </h1>
                  </div>
                </div>
                <div class="introduction">
                  <div class="left-introduction">
                    <span>性别：男</span><br>
                    <span>工作经验：3年</span>
                  </div>
                  <div class="right">
                    <button name="settingBtn" class="setting-btn btn">编辑个人资料 </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="list-block">
              <div class="detail-list detail-list">
                <div class="list-header">
                  <div class="header-content">
                    <!--                 子菜单-->
                    <a  href="" class="nav-item router-link-exact-active route-active active"></a>
                  </div>
                </div>
                <DetailMessage/>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Header from "@/components/Header.vue";
import Avator from "@/components/Avator.vue";
import DetailMessage from "@/components/detail/DetailMessage.vue";
export default {
  name: "UserDetailView",
  components:{
    Header,
    Avator,
    DetailMessage
  }
}
</script>

<style scoped>
#appsds{
  background-color: #f7f8fa;
}
button, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #007fff;
  color: #fff;
  border-radius: 2px;
  border: none;
  padding: .5rem 1.3rem;
  outline: none;
  transition: background-color .3s,color .3s;
  cursor: pointer;
}
body{
  background-color: #f7f8fa;
}
img {
  border-style: none;
}
.el-header{
  position: absolute;top: 0;left: 0;right: 0;
}
.el-main{
  position: absolute;top: 60px;left: 0px;right: 0;bottom: 0px;
  background-color: #f7f8fa;
}
/*主页部分*/
.container {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 708px;
  background-color: #f7f8fa;
}
.main-container>.view {
  margin-top: 1.767rem;
}
.major-area {
  flex: 1 1 auto;
  min-width: 0;
}
.user-info-block {
  display: flex;
  padding: 2.5rem;
}
.block {
  background-color: #fff;
  border-radius: 2px;
}
.shadow {
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
.user-info-block .avatar {
  flex: 0 0 auto;
  margin-right: 2.4rem;
  width: 7.5rem;
  height: 7.5rem;
  background-color: #f9f9f9;
  border-radius: 50%;
}
.avatar {
  display: inline-block;
  position: relative;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.lazy {
  position: relative;
  -o-object-fit: cover;
  object-fit: cover;
}
.lazy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: inherit;
  border-radius: inherit;
}
.lazy:not(.immediate)::before {
  transition: opacity .2s;
}
.user-info-block .info-box {
  flex: 1 1 auto;
}
.info-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info-box .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.info-box .top .left {
  display: flex;
}
.info-box .top .username {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #000;
}
.info-box .top .username .user-name {
  display: inline-block;
}
.introduction {
  display: flex;
  justify-content: space-between;
}
.introduction .right {
  display: flex;
  align-items: flex-end;
}
.introduction .right .setting-btn {
  color: #007fff;
  padding: 0;
  height: 2.834rem;
  font-size: 1.333rem;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid #007fff;
  background-color: #fff;
  border-radius: 4px;
  width: 9.834rem;
}
.left-introduction{
  margin-top: 10px;
}
.list-block {
  margin-top: 1rem;
}
.list-header{
  position: relative;
  margin: 0;
  padding: 0;
  height: 4rem;
  background-color: #fff;
  border-radius: .2rem .2rem 0 0;
  border-bottom: 1px solid #e4e6eb;
  z-index: 100;
}
.list-header .header-content {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 960px;
  white-space: nowrap;
  position: relative;
  margin: 0 auto;
}
</style>